<template>
    <ContentField>
        <table class="table table-striped table-hover" style="text-align:center">
            <thead>
                <tr>
                <th scope="col">A</th>
                <th scope="col">B</th>
                <th scope="col">对战结果</th>
                <th scope="col">对战时间</th>
                <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.record.id">
                    <td>
                        <img :src="record.a_photo" class="user-photo">
                        &nbsp;
                        <span class="user-username">{{record.a_username}} </span>
                    </td>
                    <td>
                        <img :src="record.b_photo" class="user-photo">
                        &nbsp;
                        <span class="user-username">{{record.b_username}} </span>
                    </td>
                    <td>{{record.result}}</td>
                    <td>{{record.record.createtime}}</td>
                    <td>
                        <button @click="open_record_content(record.record.id)" type="button" class="btn btn-secondary">对战回放</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="...">
            <ul class="pagination" style="float:right;">
                <li class="page-item" @click="click_page(-2)">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li :class="'page-item '+ page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                    <a class="page-link" href="#">{{page.number}}</a>
                </li>
                <li class="page-item" @click="click_page(-1)">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </ContentField>
</template>

<script>
import ContentField from "@/components/ContentFiled.vue"
import {useStore} from "vuex"
import $ from "jquery"
import {ref} from "vue"
import router from "../../router/index"

export default{
    components:{
        ContentField
    },
    setup(){
        const store = useStore();
        let current_page = 1;
        let records = ref([]);
        let total_records = 0;
        let pages = ref([]); //底下展示的pages[1，2，3]

        const click_page = page =>{
            if(page === -2) page = current_page -1;
            else if(page === -1) page = current_page +1;
            let max_pages = parseInt(Math.ceil(total_records/5));

            if(page >=1 && page <= max_pages){
                pull_records(page);
            }
        }
        const update_pages = () =>{ //如果是5条/页的话，看能否展示几页
            let max_pages = parseInt(Math.ceil(total_records /5));
            let new_pages = [];
            for(let i= current_page -2 ;i<=current_page +2;i++)
            {
                if(i>=1 && i<=max_pages){
                    new_pages.push({
                        number:i,
                        is_active: i === current_page ? "active" : "",
                    });
                }
            }
            pages.value = new_pages;
        }

        const pull_records = (page) => {
            current_page = page;
            $.ajax({
                url:"http://127.0.0.1:3000/record/getlist/",
                type:"get",
                data:{
                    page
                },
                headers:{
                    Authorization:"Bearer "+ store.state.user.token,
                },
                success(resp){
                    records.value = resp.records;
                    total_records = resp.records_count;
                    update_pages();
                },
                error(resp){
                    console.log(resp);
                }
            })
        }
        pull_records(current_page);

        const open_record_content = (recordId) =>{ //开启回放
            for(const record of records.value){
                if(record.record.id === recordId){
                    console.log(record.record.id,recordId);
                    store.commit("updateIsRecord",true);
                    //存一下当前对战的信息
                    store.commit("updateGame",{
                        a_id : record.record.a_id,
                        b_id : record.record.b_id,
                        rows : 16,
                        cols : 16,
                    });
                    store.commit("updateSteps",record.record.steps),
                    store.commit("updateRecordLoser",record.record.loser);
                    router.push({
                        name:"record_content",
                        params:{
                            recordId
                        }
                    })
                    break;
                }
            }
        }
        return {
            records,
            open_record_content,
            pages,
            click_page,
        }
    }
}
</script>
<style scoped>
img.user-photo{
    width: 4vh;
    border-radius: 50%;
}
</style>